<template>
  <div class="app">
    <h1>我是App组件</h1>
    <h2 v-text="school"></h2>
    <h2 v-beauty="school"></h2>
    <h2 v-tuwei="girl"></h2>
    <br>
    <Child/>
  </div>
</template>

<script>
  import Child from './components/Child.vue'

  export default {
    name:'App',
    components:{Child},
    data() {
      return {
        school:'atguigu',
        girl:'程程'
      }
    },
    directives:{
      /* 
          1.beauty函数何时调用？ —— 有人使用v-beauty这个指令时
          2.beauty接收哪些参数？ —— 指令所在元素、本次指令带来的信息
          3.beauty中的this是谁？—— 爱谁谁，总之不是vm、不是vc —— 我们不用this
      */
      beauty(element,{value}){
        element.innerText = value.toUpperCase()
        element.style.color = 'red'
        element.style.backgroundColor = 'yellow'
        element.style.boxShadow = '0 0 10px black'
        element.style.padding = '10px'
        element.style.borderRadius = '10px'
      },
    }
  }
</script>

<style>
  .app {
    background-color: skyblue;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px black;
  }
</style>